<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.w3.org/1999/xhtml">
<meta charset="UTF-8">
<title>版块</title>
<link rel="icon" type="image/x-icon">
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<body>
<!--样式资源-->
<div th:insert="base/style :: style"></div>
<!--样式资源-->

<!--nav导航-->
<div th:insert="base/nav :: nav"></div>
<!--nav导航-->
<!--hidden-->
<div th:insert="base/hidden :: hidden"></div>
<!--hidden-->
<!--内容-->
<div class="content" style="padding-bottom: 30px">
    <div class="page-header">
        <div class="row">
            <div class="col-md-2">
                <h4 style="color: #363636;font-size: 20px;font-style: italic;margin-left: 20px">&nbsp;&nbsp;&nbsp;版块栏目<small></small></h4>
                <div class="col-md-4" >
                    <ul style="margin-top: 10px;margin-left: 30px" id="forums">
                    </ul>
                </div>
            </div>
            <div class="col-md-8">
                <div class="col-md-12">
                    <h4 style="color: #363636;font-size: 20px;font-style: italic;margin-left: 20px">&nbsp;&nbsp;&nbsp;Information<small id="collection_forum"></small></h4>
                    <div class="row" style="margin-top: 10px">
                        <ul class="layui-timeline" id="posts">
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!--内容-->

<!--页脚-->
<div th:insert="base/footer :: footer"></div>
<!--页脚-->
<script th:src="@{/load.js}"></script>

<script>

    /**
     * 展示版块列表
     * @param obj 版块对象数据
     * @param str 空字符串
     */
    function showForums(obj,str){
        $.each(obj,function (index,item) {
            str +='<li><a  class="btn" id="'+item.id+'" onclick="showForumPosts(this.id)">'+item.name+'</a></li>';
        });
        showForumPosts(obj[0].id);
        $("#forums").html(str);
    }
    showForums(get_forum_list().data,"");


    /**
     * 展示版块下的帖子列表
     * @param id
     */
    function showForumPosts(id){
        $("#collectionforum").html('&nbsp;<a id="'+id+'" style="color: #00b4ef;text-decoration: none" href="#" onclick="collectionF(this.id)">关注该版块</a>');
        $("#posts").html("");
        //展示时候验证是否关注了
        isCollectionF(id);
        //加载帖子
        load_posts("#posts",FORUM_POST_LIST,SUM_FORUM_POST,id);
    }

    /**
     * 关注该版块
     * @param id
     */
    function collectionF(id) {
        layui.use('layer',function () {

            if(isNaN(UID)){
                layer.msg("请先登录!");
                setTimeout("showLogin()",1000);
            }else {
                let index = layer.load(2);
                let obj = collection_forum('?uid='+UID+'&ofid='+id);
                if(obj.data !== 0){
                    layer.close(index);
                    layer.msg("关注成功!");
                    isCollectionF(id);
                }else {
                    layer.close(index);
                    layer.msg("关注失败!");
                }
            }

        });

    }

    /**
     * 判断是否关注了
     * @param id
     */
    function isCollectionF(id) {
        if($.inArray(parseInt(UID) ,get_collection_forum_uids(id).data) !== -1){
            $("#collection_forum").html('&nbsp;<a id="'+id+'" style="color: #00b4ef;text-decoration: none" href="#" onclick="deleteCollectionF(this.id)">取消关注</a>');
        }else {
            $("#collection_forum").html('&nbsp;<a id="'+id+'" style="color: #00b4ef;text-decoration: none" href="#" onclick="collectionF(this.id)">关注该版块</a>');
        }
    }

    /**
     * 取消关注
     * @param id
     */
    function deleteCollectionF(id) {
        layui.use('layer',function () {

            if(isNaN(UID)){
                layer.msg("请先登录!");
                setTimeout("showLogin()",1000);
            }else {
                let index = layer.load(2);
                if(del_collection_forum('?uid='+UID+'&ofid='+id).data !== 0){
                    $("#collection_forum").html('&nbsp;<a id="'+id+'" style="color: #00b4ef;text-decoration: none" href="#" onclick="collectionF(this.id)">关注该版块</a>');
                    layer.close(index);
                    layer.msg("成功取消！")
                }else {
                    layer.close(index);
                    layer.msg("操作失败！")
                }
            }

        })
    }
</script>
</body>
</html>